import React, { Component , useState, useEffect } from 'react'
import * as echarts from 'echarts';
import ecStat from 'echarts-stat';
import { InboxOutlined } from '@ant-design/icons';
import axios from 'axios';
import {Modal, Spin,Button,Form,Upload,Input} from 'antd';

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 14,
  },
};
const antbtn = {
  width: '100%',
}

export default class Bubble extends Component {    
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      isModalOpen: false,
      ChartTitle:'',
      file: null,
      DataList:[],
      Xtitle:[],
      styles :{
        backgroundImage: 'url(/img/Bar.png)',
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center center',
        backgroundSize: 'cover',
        width: '100%',
        height: '100vh'
      }
    };
    this.normFile = this.normFile.bind(this);
    this.onFinish = this.onFinish.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  showModal = () => {
    this.setState({
      isModalOpen: true,
    });
  };
  handleOk = () => {
    this.setState({
      isModalOpen: false,
    });
  };
  handleCancel = () => {
    this.setState({
      isModalOpen: false,
    });
  };
  handleChange = (e) => {
    this.setState({
      ChartTitle: e.target.value,
    });
  }
  normFile = (e) => {
    console.log('Upload event:', e);
    const File = e.file;
    this.setState({ file: File });
  }
  onFinish = (values) => {
    this.setState({
      isModalOpen: false,
    });
    this.initChart();
  }
    initChart = () => {
      const { DataList ,ChartTitle} = this.state;
      this.setState({
        DataList:[],
      });
        var chartDom = document.getElementById('BubbleChart');
        this.myChart = echarts.init(chartDom);
        echarts.registerTransform(ecStat.transform.histogram);
        fetch('./example/example-bubble.xlsx')
          .then(res => res.text())
          .then(data => {
            const rows = data.split('\n');
            rows.map((row, index) => {
              const cells = row.split('\t');
              if(cells[0] === ''){
                return;
              }
              const [name, ...path] = cells;
              console.log(name,path);
              console.log(cells,index);
              const node =[];
            });
          });
        const data = [
            [
              [28604, 77, 17096869, 'Australia', 1990],
              [31163, 77.4, 27662440, 'Canada', 1990],
              [1516, 68, 1154605773, 'China', 1990],
              [13670, 74.7, 10582082, 'Cuba', 1990],
              [28599, 75, 4986705, 'Finland', 1990],
              [29476, 77.1, 56943299, 'France', 1990],
              [31476, 75.4, 78958237, 'Germany', 1990],
              [28666, 78.1, 254830, 'Iceland', 1990],
              [1777, 57.7, 870601776, 'India', 1990],
              [29550, 79.1, 122249285, 'Japan', 1990],
              [2076, 67.9, 20194354, 'North Korea', 1990],
              [12087, 72, 42972254, 'South Korea', 1990],
              [24021, 75.4, 3397534, 'New Zealand', 1990],
              [43296, 76.8, 4240375, 'Norway', 1990],
              [10088, 70.8, 38195258, 'Poland', 1990],
              [19349, 69.6, 147568552, 'Russia', 1990],
              [10670, 67.3, 53994605, 'Turkey', 1990],
              [26424, 75.7, 57110117, 'United Kingdom', 1990],
              [37062, 75.4, 252847810, 'United States', 1990]
            ],
            [
              [44056, 81.8, 23968973, 'Australia', 2015],
              [43294, 81.7, 35939927, 'Canada', 2015],
              [13334, 76.9, 1376048943, 'China', 2015],
              [21291, 78.5, 11389562, 'Cuba', 2015],
              [38923, 80.8, 5503457, 'Finland', 2015],
              [37599, 81.9, 64395345, 'France', 2015],
              [44053, 81.1, 80688545, 'Germany', 2015],
              [42182, 82.8, 329425, 'Iceland', 2015],
              [5903, 66.8, 1311050527, 'India', 2015],
              [36162, 83.5, 126573481, 'Japan', 2015],
              [1390, 71.4, 25155317, 'North Korea', 2015],
              [34644, 80.7, 50293439, 'South Korea', 2015],
              [34186, 80.6, 4528526, 'New Zealand', 2015],
              [64304, 81.6, 5210967, 'Norway', 2015],
              [24787, 77.3, 38611794, 'Poland', 2015],
              [23038, 73.13, 143456918, 'Russia', 2015],
              [19360, 76.5, 78665830, 'Turkey', 2015],
              [38225, 81.4, 64715810, 'United Kingdom', 2015],
              [53354, 79.1, 321773631, 'United States', 2015]
            ]
          ];
          var option = {
            title: {
              text: ChartTitle,
              left: '5%',
              top: '3%'
            },
            legend: {
              right: '10%',
              top: '3%',
              data: ['1990', '2015']
            },
            grid: {
              left: '8%',
              top: '10%'
            },
            xAxis: {
              splitLine: {
                lineStyle: {
                  type: 'dashed'
                }
              }
            },
            yAxis: {
              splitLine: {
                lineStyle: {
                  type: 'dashed'
                }
              },
              scale: true
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                label: {
                  backgroundColor: '#6a7985'
                }
              }
            },
            series: [
              {
                name: '1990',
                data: data[0],
                type: 'scatter',
                symbolSize: function (data) {
                  return Math.sqrt(data[2]) / 5e2;
                },
                emphasis: {
                  focus: 'series',
                  label: {
                    show: true,
                    formatter: function (param) {
                      return param.data[3];
                    },
                    position: 'top'
                  }
                },
                itemStyle: {
                  shadowBlur: 10,
                  shadowColor: 'rgba(120, 36, 50, 0.5)',
                  shadowOffsetY: 5,
                  color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                    {
                      offset: 0,
                      color: 'rgb(251, 118, 123)'
                    },
                    {
                      offset: 1,
                      color: 'rgb(204, 46, 72)'
                    }
                  ])
                }
              },
              {
                name: '2015',
                data: data[1],
                type: 'scatter',
                symbolSize: function (data) {
                  return Math.sqrt(data[2]) / 5e2;
                },
                emphasis: {
                  focus: 'series',
                  label: {
                    show: true,
                    formatter: function (param) {
                      return param.data[3];
                    },
                    position: 'top'
                  }
                },
                itemStyle: {
                  shadowBlur: 10,
                  shadowColor: 'rgba(25, 100, 150, 0.5)',
                  shadowOffsetY: 5,
                  color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                    {
                      offset: 0,
                      color: 'rgb(129, 227, 238)'
                    },
                    {
                      offset: 1,
                      color: 'rgb(25, 183, 207)'
                    }
                  ])
                }
              }
            ]
          };
        this.myChart.setOption(option);
    }
    chartReseize = () => {
        this.myChart && this.myChart.resize()
    }
    componentDidMount() {
        this.initChart()
    }
    render() {
      const { isModalOpen ,loading } = this.state;
      return (
          <>
            <Button style={antbtn} onClick={() => this.showModal()} className='antbtn'>Open Modal</Button>
            <Modal title="Basic Modal" open={isModalOpen} onOk={() =>this.handleOk()} onCancel={() =>this.handleCancel()} 
            cancelButtonProps={{ style: { display: "none" } }} // 隐藏取消按钮
            okButtonProps={{ style: { display: "none" } }} // 隐藏确认按钮
            >
            <Spin spinning={loading}>  
            <Form onSubmit={this.handleSubmit}
                  name="validate_other"
                  {...formItemLayout}
                  onFinish={this.onFinish}
                  style={{
                    maxWidth: 600,
                  }}
                >
                  <Form.Item label="Title">
                    <Input placeholder="Please Input Title" value={this.state.value} onChange={this.handleChange} />
                  </Form.Item>
                  <Form.Item label="Dragger">
                    <Form.Item name="dragger" multiple={false} valuePropName="file" getValueFromEvent={this.normFile} noStyle>
                     <Upload.Dragger name="files"  action="/upload.do" >
                        <p className="ant-upload-drag-icon">
                          <InboxOutlined />
                        </p>
                        <p className="ant-upload-text">Click or drag file to this area to upload</p>
                      </Upload.Dragger>
                      </Form.Item>
                    </Form.Item>
                    <Form.Item label="Example File">
                    <Button type="text" onClick={()=> this.getExampleFile()} danger>Example File</Button>
                    </Form.Item>
                  <Form.Item
                    wrapperCol={{
                      span: 12,
                      offset: 6,
                    }}
                  >
                    <Button type="primary" htmlType="submit" >
                      Submit
                    </Button>
                  </Form.Item>
              </Form></Spin>
            </Modal>
            <div className='w100 h100' id='BubbleChart'></div>
          </>      
        )
    }
}
